<template>
  <!-- 图层面板 -->
  <div>
    <table class="mt10">
      <tr>
        <td width="40%">背景颜色</td>
        <td>
          <!-- <q-input v-model.lazy="topoData.layer.backColor" /> -->
          <q-input filled v-model="topoData.layer.backColor" class="my-input">
            <template v-slot:append>
              <q-icon name="colorize" class="cursor-pointer">
                <q-popup-proxy transition-show="scale" transition-hide="scale">
                  <q-color v-model="topoData.layer.backColor" />
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
        </td>
      </tr>
      <tr>
        <td>背景图片</td>
        <td>
          <q-input v-model.lazy="topoData.layer.backgroundImage" />
        </td>
      </tr>
      <tr>
        <td>分辨率</td>
        <td>
          <q-select v-model="layerWH" :options="whOptions" />
        </td>
      </tr>
      <tr v-if="layerWH == '自定义'">
        <td>宽</td>
        <td>
          <q-input v-model.number.lazy="topoData.layer.width" />
        </td>
      </tr>
      <tr v-if="layerWH == '自定义'">
        <td>高</td>
        <td>
          <q-input v-model.number.lazy="topoData.layer.height" />
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data () {
    return {
      layerWHTemp: "",
      whOptions: [
        "1024x768",
        "1366x768",
        "1280x800",
        "1440x900",
        "1600x900",
        "1920x1080",
        "自定义"
      ]
    };
  },
  computed: {
    layerWH: {
      get: function () {
        if (!this.topoData.layer.width || !this.topoData.layer.height) {
          this.topoData.layer.width = 1600;
          this.topoData.layer.height = 900;
        }
        if (this.layerWHTemp == "") {
          var wh = this.topoData.layer.width + "x" + this.topoData.layer.height;
          if (this.whOptions.indexOf(wh, 0) == -1) {
            this.layerWHTemp = "自定义";
          } else {
            this.layerWHTemp = wh;
          }
        } else {
          var wh = this.topoData.layer.width + "x" + this.topoData.layer.height;
          if (this.whOptions.indexOf(wh, 0) == -1) {
            this.layerWHTemp = "自定义";
          }
        }
        return this.layerWHTemp;
      },
      set: function (val) {
        this.layerWHTemp = val;
        if (val == "自定义") {
        } else {
          var wh = val.split("x");
          this.topoData.layer.width = parseInt(wh[0]);
          this.topoData.layer.height = parseInt(wh[1]);
        }
      }
    },
    ...mapState({
      topoData: state => state.topoEditor.topoData
    })
  }
};
</script>

<style lang="scss" scoped></style>
